<template>
  <el-dialog
    title="新增"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始日期">
            <el-date-picker
              v-model="form.start"
              type="date"
              placeholder="开始日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="截止日期">
            <el-date-picker
              type="date"
              placeholder="截止日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              v-model="form.end"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="身份证">
        <el-input
          placeholder="身份证号码查询，可输入多个身份证号码,多个身份证号码用逗号隔开"
          v-model="nameOrCard"
          style="width: 430px"
        ></el-input>
        &emsp;<el-button
          icon="el-icon-search"
          type="primary"
          plain
          @click="searchId"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-row style="display: flex">
          <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5">
            <div
              style="
                padding: 5px 15px 10px;
                background-color: #f5f7fa;
                border-radius: 3px;
              "
            >
              <div>未选列表</div>
              <!-- <span style="float: right;">{{ listArr.length }}</span> -->
              <vxe-table
                :data="listArr"
                style="width: 100%"
                border
                height="393"
                @checkbox-all="checkAll"
                @checkbox-change="checkAll"
              >
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column
                  field="xingming"
                  title="姓名"
                  width="100"
                ></vxe-column>
                <vxe-column
                  field="zhiwu_jiancheng"
                  title="工作单位及职务"
                  width="190"
                ></vxe-column>
              </vxe-table>
            </div>
          </el-col>
          <el-col
            :span="3"
            style="
              width: 80px;
              padding: 0 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <!--穿梭框选中-->
            <div style="display: flex; justify-content: center">
              <el-button
                class="middle-circle"
                icon="el-icon-arrow-right"
                :disabled="!leftData.length"
                size="mini"
                type="primary"
                @click="handelSelect"
              />
            </div>
            <!--穿梭框取消-->
            <div style="display: flex; justify-content: center">
              <el-button
                class="middle-circle"
                icon="el-icon-arrow-left"
                :disabled="!rightData.length"
                size="mini"
                type="primary"
                style="margin-top: 10px; margin-left: 0px"
                @click="handleRemoveSelect"
              />
            </div>
          </el-col>
          <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5">
            <div
              style="
                padding: 5px 15px 10px;
                background-color: #f5f7fa;
                border-radius: 3px;
              "
            >
              <div>已选列表</div>
              <!-- <span style="float: right;">{{ selectArr.length }}</span> -->
              <vxe-table
                :data="selectArr"
                style="width: 100%"
                border
                height="393"
                @checkbox-all="checkRightAll"
                @checkbox-change="checkRightAll"
              >
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column
                  field="xingming"
                  title="姓名"
                  width="100"
                ></vxe-column>
                <vxe-column
                  field="zhiwu_jiancheng"
                  title="工作单位及职务"
                  width="190"
                ></vxe-column>
              </vxe-table>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="查看原因事由">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          v-model="form.applyContent"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">提 交</el-button>
    </span>
  </el-dialog>
</template>
  
  <script>
import {
  getPersonByNamesIdCards,
  searchSave,
} from "@/api/datacentersg/achives/documentApi";
import store from "@/store";
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        start: "",
        end: "",
        applyContent: "",
      },
      nameOrCard: "",
      searchParam: {},
      listArr: [],
      selectArr: [],
      changeArr: [],
      leftData: [], // 左边选中列表数据
      rightData: [], // 右边选中列表数据
      leftList: [],
    };
  },
  methods: {
    init() {
      this.dialogVisible = true;
      this.handleClear();
    },
    searchId() {
      const pattern = new RegExp("[0-9]+");
      let sfzh = "";
      if (pattern.test(this.nameOrCard)) {
        sfzh = this.nameOrCard + ",";
      }
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          sfzhs: sfzh,
        },
      };
      getPersonByNamesIdCards(params).then((result) => {
        if (result.result) {
          this.listArr = result.resultdata;
        }
      });
    },
    checkAll({ checked, records }) {
      console.log(records, "left");
      this.leftData = records;
    },
    checkRightAll({ checked, records }) {
      console.log(records, "rigth");
      this.rightData = records;
    },
    // 穿梭框选中
    handelSelect() {
      for (let i = 0; i < this.selectArr.length; i++) {
        for (let j = 0; j < this.leftData.length; j++) {
          if (this.leftData[j].person_id === this.selectArr[i].person_id) {
            this.leftData = []; // 避免 左边勾选内容 leftData 与 右边内容 selectArr 重复
          }
        }
      }
      this.leftList = this.leftData;
      this.selectArr = this.handleConcatArr(this.selectArr, this.leftData);
      console.log(this.selectArr,"select")
      this.handleRemoveTabList(this.leftData, this.listArr);
      this.leftData = [];
    },
    // 穿梭框取消
    handleRemoveSelect() {
      this.listArr = this.handleConcatArr(this.listArr, this.rightData);
      this.handleRemoveTabList(this.rightData, this.selectArr);
      this.rightData = [];
    },
    handleConcatArr(selectArr, leftData) {
      let arr = [];
      arr = arr.concat(selectArr, leftData);
      return arr;
    },
    handleRemoveTabList(isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]["person_id"] === originalArr[k]["person_id"]) {
              originalArr.splice(k, 1);
            }
          }
        }
      }
    },

    onSubmit() {
      if (this.form.start === "" || this.form.end === "") {
        this.$message({
          message: "开始时间和截止时间不能为空",
          type: "warning",
        });
      } else if (this.selectArr.length === 0) {
        this.$message({
          message: "请选择一个人员",
          type: "warning",
        });
      } else {
        // 其他提交逻辑
        const personList = this.selectArr.map((item) => {
          return {
            personId: item.person_id,
            personName: item.xingming,
            jobShort: item.zhiwu_jiancheng,
            idCard: item.sfzh,
          };
        });
        // console.log(this.leftList,"leftList");
        // console.log(this.selectArr,"selectTwo")
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            startDate: this.form.start,
            endDate: this.form.end,
            applyContent: this.form.applyContent,
            personList: personList,
          },
        };
        console.log(personList, "leftData");

        searchSave(params).then((result) => {
          if (result.result) {
            this.dialogVisible = false;
            this.$emit("initData");
          }
        });
      }
    },

    handleClear() {
      this.form.start = "";
      this.form.end = "";
      this.form.applyContent = "";
      this.nameOrCard = "";
      this.listArr = [];
      this.selectArr = [];
    },
    handleClose(done) {
      done();
    },
  },
};
</script>
  
  <style>
</style>